import "./index.less";
import { useNavigate } from "react-router-dom";
import { NavBar, Tabs, SearchBar, Badge,Image } from "antd-mobile";
import React, { useRef, useEffect, useState } from 'react'
import { communityOrganizationalStructure } from "../servece";

const OrganizationalStructure: React.FC = () => {
  const [selectType, setSelectType] = useState<String>("0")
  const navigate = useNavigate();
  const goto = (url: string) => () => {
    navigate(url);
  }
  useEffect(()=>{
    communityOrganizationalStructure({ villageCode: "511602006004",/* classType:selectType  */})
      .then((res) => {
        if (res.code == 200) {
          setDataList(res.data)
        } else {
          console.log(res.data);
        }
      })
      .catch((error) => {
        console.log(error);
      });
  },[])

  // const selectOption = [
  //   {
  //     title: "居民委员会",
  //     key: "0"
  //   },
  //   {
  //     title: "监督委员会",
  //     key: "1"
  //   },
  // ]
  const [dataList,setDataList]=useState([])
  return (
    <div className="organizationalStructure">
      <div className="organizationalStructure_content">
        <div className="content_Tab">
          {/* {selectOption?.map((item, index) => {
            return <div key={index}
              className={item?.key == selectType ? "isSelect" : "noSelect"}
              onClick={()=>{
                setSelectType(item?.key)
              }}
            >{item?.title}</div>
          })} */}
          社区工作人员
        </div>
        <div className="content_List">
          {
            dataList?.map((item,index)=>{
              return <div key={item?.title} className="content_List-item">
                <img alt=""  src={item?.img||`/images/mycommunity/zzjg${index<4?index:index-4}.png`} className="content_List-item-photo"/>
                <div className="content_List-item-imformation">
                  <div className="imformation-name">{item?.name}</div>
                  <div className="imformation-professional">{item?.job}</div>
                </div>
              </div>
            })
          }
        </div>
      </div>
    </div>
  );
};

export default OrganizationalStructure;
